<template>
  <div class="tree-cert">
    <div class="btn-tip-box">
      <div  style="margin-right: -33px">
        <customButton
          title="蓝色"
          help="当前节点下级数量"
          theme="primary"
          size="small"
          shape="round"
        />
        <small class="btn-msg">下级数量</small>

        <customButton
          title="绿色"
          help="已交资质数量(仅统计未作废的)"
          theme="success"
          size="small"
          shape="round"
        />
        <small class="btn-msg">已提交</small>

        <customButton
          title="黄色"
          help="待提交资质数量(仅统计未作废的)"
          theme="warning"
          size="small"
          shape="round"
          v-if="queryType == 'crud'"
        />
        <small class="btn-msg" v-if="queryType == 'crud'">待提交</small>

        <customButton
          title="红色"
          help="已过期或者效期30天以内资质数量(仅统计已提交未作废的)"
          theme="danger"
          size="small"
          shape="round"
          v-if="queryType != 'view'"
        />
        <small class="btn-msg" v-if="queryType != 'view'">预警</small>
      </div>
      <div>
        <small>树层级: 供应商 -> 厂商 -> 平台分类 -> 商品</small>
      </div>
      <customForm  :rules="{supplierId: [{ required: true, message: '请选择', trigger: 'blur' }]}" :label-width="80" v-if="showSupplierId">
        <template #content>
          <customFormItem label="供应商" ref="supplierId"  name="supplierId" :parent="_self" :form="formQuery" :type="constCommon.formItemType.selectStatic.name"
                          :config="{options: utilVuex.getSpList()}"
                          @change="load"
                          full-width
          />
        </template>
      </customForm>
    </div>
    <customTree
      :data="treeData"
      @click="_click"
      @load="load"
      :isLoading="isLoading"
      :keys="{ value: 'id', label: 'title', children: 'children' }"
      :subHeight="200"
      :expandLevel="cpExpandLevel"
      ref="customTree"
      :defaultActived="defaultActived"
      :propPartLoad="true"
    >
      <template v-slot:customOperations="node">
        <customSpace style="    margin-right: 3px;position: absolute" class="btn-tip-box">
          <template #content>
            <customButton
              :title="node.node.getChildren()? node.node.getChildren().length + '' : '0'"
              theme="primary"
              size="small"
              shape="round"
              :style="{'visibility': _getTypeNameSub(node) != null ? 'visible' : 'hidden'}"
            />
            <customButton
              :title="_getTitle(node, 'numSubmited')"
              theme="success"
              size="small"
              shape="round"
            />
            <customButton
              :title="_getTitle(node, 'numUnSubmit')"
              theme="warning"
              size="small"
              shape="round"
              v-if="queryType == 'crud'"
            />
            <customButton
              :title="_getTitle(node, 'numDayOver')"
              theme="danger"
              size="small"
              shape="round"
              v-if="queryType != 'view'"
            />
          </template>
        </customSpace>
      </template>
    </customTree>
  </div>
</template>

<script>

import utilVuex from '@/util/utilVuex'

export default {
  desc: '资质树',
  name: 'treeCert',
  props: {
    /**
     * @Description：查询类型 view: 查看 warn: 预警
     */
    queryType: {
      type: String,
      default: () => 'crud'
    }
  },
  components: {
  },
  mounted() {
    this.load()
  },
  data() {
    return {
      treeData: [],
      defaultActived: [],
      isLoading: false,
      formQuery: {supplierId: ''},
      isGtMax: false,
      showSupplierId: false,
    }
  },
  methods: {
    _getTitle(node, key) {
      if (!node || !node.node || !node.node.data || !node.node.data[key]) {
        return '0'
      }
      return node.node.data[key] + ''

    },
    _getTypeNameSub(node, key) {
      let typeNameSub = node.node.data.typeNameSub
      if (!typeNameSub || !this.constCommon.certTypeNameMap[typeNameSub]) {
        return null
      }
      return `下级${this.constCommon.certTypeNameMap[typeNameSub].title}数量`
    },
    // 加载数据
    load() {
      if (this.isGtMax && this.strings.isBlank(this.formQuery.supplierId)) {
        this.utilMessage.warning('请先选择供应商')
        this.$refs.supplierId.focus()
        return
      }
      this.isLoading = true
      this.defaultActived = []
      this.$ajax.get(`/base/certificate/getCertTree?queryType=${this.queryType}&supplierIdFilter=${this.formQuery.supplierId}`, {
      }).then(response => {
        if (response.code == 0) {
          let dataOne = {}
          if (response.data && response.data.length > 0) {
            if (this.queryType == 'crud' && response.data.length > 30) {
              this.isGtMax = true
              this.showSupplierId = true
              this.utilMessage.warning('供应商超过30条，请先选择供应商')
              this.$refs.customTree.isInnerLoading = false
              this.isLoading = false
              setTimeout(() => {
                this.$refs.supplierId.focus()
              }, 500)
              return
            }
            this.defaultActived = [response.data[0].id]
            this.treeData = JSON.parse(JSON.stringify(response.data))
            dataOne = response.data[0]
          } else {
            this.treeData = []
          }
          if (this.getInst() && this.getInst().clickNodeLast != null) {
            this.$emit('afterLoad', this.getInst().clickNodeLast.data)
          } else{
            this.$emit('afterLoad', dataOne)
          }

        } else {
          this.utilMessage.error(response.msg)
        }
        this.$nextTick(() => {
          this.isLoading = false
        })
      })
      setTimeout(() => {
        this.isLoading = false
      }, 10000)
    },

    // 节点点击时触发
    getInst() {
      return this.$refs.customTree
    },

    // 节点点击时触发
    _click(nodeData) {
      this.$emit('click', nodeData)
    },

    // 节点点击时触发
    getDefaultActived() {
      return this.defaultActived
    },
  },
  watch: {
  },
  computed: {
    utilVuex() {
      return utilVuex
    },
    // 树展开级别
    cpExpandLevel() {
     if (this.constCommon.deptType.supplier == this.utils.getCurrentUser().deptType) {
       return 1
     }
     return 0
    }
  }
}
</script>

<style lang="scss" >
.tree-cert{
  .t-tree__label{
    max-width: 220px;
    overflow: hidden;
    font-size: 12px;
  }
  .btn-tip-box{
    text-align: right;
    font-size: 13px;
  }
  .btn-tip-box .t-button{
    width: 33px;
    height: 18px;
    font-size: 11px;
    zoom: 90%;
  }
  .btn-msg{
    width: 55px;
    display: inline-block;
    font-size: 11px;
    line-height: 24px;
    margin-left: 1px;
    text-align: left;
  }
}
</style>
